<template>
  <div class="container">
    <div class="head">
      <span data-v-48e452ac="" style="font-size: 12px; color: pink"
        >说明：目前支持学科和关键字条件筛选</span
      >
      <el-button @click="$router.push('/questions/new')" type="success"
        >新增试题</el-button
      >
    </div>
    <el-row :gutter="20">
      <el-form
        :model="elForm"
        inline
        label-position="right"
        label-width="80px"
        size="small"
      >
        <el-col :span="6">
          <el-form-item label="学科" prop="subList">
            <el-select
              v-model="elForm.subjectID"
              placeholder="请选择"
              @change="getList(elForm.subjectID)"
            >
              <el-option
                v-for="item in subList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="试题类型">
            <el-select v-model="elForm.questionType" placeholder="请选择">
              <el-option
                v-for="item in typList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input v-model="elForm.remarks"></el-input> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="elForm.catalogID" placeholder="请选择">
              <el-option
                v-for="item in inList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="elForm.difficulty" placeholder="请选择">
              <el-option
                v-for="item in difList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="elForm.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="elForm.tags" placeholder="请选择">
              <el-option
                v-for="item in tagList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="elForm.direction" placeholder="请选择">
              <el-option
                v-for="(item, index) in dirList"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="城市" prop="province">
            <el-select
              style="width: 105px"
              v-model="elForm.province"
              @change="handleProvince"
              filterable
            >
              <el-option
                v-for="item in citySelect.province"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select style="width: 105px" v-model="elForm.city" filterable>
              <el-option
                v-for="item in citySelect.cityDate"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input
              v-model="elForm.keyword"
              placeholder="请根据题干搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="elForm.creatorID" placeholder="请选择">
            </el-select>
          </el-form-item>
          <el-form-item class="flbox">
            <el-button @click="reset">清空</el-button>
            <el-button @click="submit" type="primary">搜索</el-button>
          </el-form-item></el-col
        >
      </el-form>
    </el-row>
    <div class="mid">
      <el-alert
        :closable="false"
        style="vertical-align: middle"
        title=""
        type="info"
        show-icon
        >数据一共 {{ counts }} 条
      </el-alert>
    </div>
    <bas-table @reList="reListHandler" :newList="newList"></bas-table>
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :current-page="elForm.page"
        :page-size="elForm.pagesize"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="counts"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as getDic } from '@/api/hmmm/directorys.js'
import { simple as getTag } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { list } from '@/api/hmmm/questions.js'
import basTable from '../components/basTable.vue'
export default {
  components: {
    basTable
  },
  data () {
    return {
      citySelect: {
        province: [],
        cityDate: []
      },
      activeName: '0',
      typList: [],
      subList: [],
      inList: [],
      tagList: [],
      difList: [],
      dirList: [],
      newList: [],
      counts: 1,
      elForm: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: null
      }
    }
  },
  computed: {},
  methods: {
    reListHandler () {
      this.getaList()
    },
    async handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.elForm.pagesize = val
      this.getaList()
    },
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.elForm.page = val
      this.getaList()
    },

    /* 获取学科列表 */
    async getSublist () {
      const res = await simple()
      this.subList = res.data
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.elForm.city = this.citySelect.cityDate[0]
    },
    /* 获取试题类型 */
    gettypList () {
      this.typList = questionType
    },
    /* 获取试题难度 */
    getdifList () {
      this.difList = difficulty
    },
    /* 获取方向 */
    getdirList () {
      this.dirList = direction
    },
    async getList (id) {
      const res1 = await getDic({ subjectID: id })
      const res2 = await getTag({ subjectID: id })
      this.tagList = res2.data
      this.inList = res1.data
    },
    /* 清空表单 */
    reset () {
      this.elForm = {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: null
      }
    },
    /* 搜索 */
    async submit () {
      this.getaList()
    },
    /* tab栏切换 */
    async handleClick (e) {
      this.reset()
      e.index - 1 < 0
        ? (this.elForm.chkState = null)
        : (this.elForm.chkState = e.index - 1)
      this.submit()
    },
    /* 获取表格数据 */
    async getaList () {
      const res = await list({ ...this.elForm })
      this.newList = res.data.items
      this.counts = res.data.counts
    }
  },
  // 挂载结束

  mounted: function () {},
  // 创建完毕状态
  created () {
    this.getCityData()
    this.getSublist()
    this.gettypList()
    this.getdifList()
    this.getdirList()
    this.getaList()
  },
  // 组件更新
  updated: function () {}
}
</script>

<style scoped lang="scss">
.container {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin: 15px;
  background-color: #fff;
  padding: 15px;
}
.head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.flbox {
  float: right;
}
.mid {
  margin-bottom: 20px;
}
.footer {
  text-align: right;
  margin-top: 15px;
}
</style>
